<template>
	<cu-custom :isBack="true">
		<template #title>整改任务</template>
	</cu-custom>
	
	<view style="text-align: center;margin: 20rpx;font-weight: bold;font-size: 36rpx;">
		{{ rectInfo.title }}
	</view>
	<view class="status-text" :class="'status-text_' + rectInfo.status">
		{{ rectStatus }}
	</view>
	<view class="link-row" @click="navToMission">
		<view class="link-btn">
			<text>查看关联督导任务</text>
			<text class="cuIcon-right"></text>
		</view>
	</view>
	
	<view class="cu-timeline" style="padding-bottom: 120rpx;">
		<view v-for="(item, index) in rectInfo.records"
			:key="index"
			class="cu-item"
		>
			<view class="content shadow-blur">
				<text>{{ item.createTime }}</text>&nbsp;{{ item.subDescription + " " + (item.opinions || "") }}
			</view>
			<view v-if="item.files && item.files.length > 0" class="file-box">
				<view v-for="(file, index) in item.files" @click="previewFile(file)" :key="index" class="file-icon">
					<image :src="calFileView(file)" mode="aspectFill"></image>
					<view class="file-name text-ellipsis-2 text-black">{{ file.fileName }}</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="handle-bar">
		<view v-if="userInfo.permissions.includes('responsible_person') && rectInfo.status !== '3'">
			<view class="hint-text" v-if="rectInfo.status === '1'">
				<text class="cuIcon-noticefill"></text>
				<text>审核中</text>
			</view>
			<CuButton size="small" :disabled="rectInfo.status === '1' || rectInfo.status === '3'" @click="handleSubmit">提交整改材料</CuButton>
		</view>
		
		<view v-if="userInfo.permissions.includes('superintendent') && rectInfo.status === '1'">
			<CuButton size="small" @click="handleReview">审核整改材料</CuButton>
		</view>
	</view>
	
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app"
import { router } from "@/router"
import { queryRectbyTaskRecordId, queryRectbyRectRecordId } from "@/api/mission.js"
import { Ref, ref, reactive, computed } from "vue"
import { IFile } from "@/interface/IFile"
import store from "../../store"
import env from "../../env"
import { getSuffix, obj2str } from "../../utils/base"
import CuButton from "@/components/CuButton.vue"
// #ifdef H5
import dd from "gdt-jsapi"
// #endif
let record_id: string
let rect_record_id: string

const userInfo = reactive({ ...store.getters.userInfo })
const props = defineProps({
	record_id: {
		type: String,
		default: null
	},
	rect_record_id: {
		type: String,
		default: null
	}
})

const submitDisable: Ref<boolean> = ref(false)

let rectInfo = ref({
	title: "",
	records: [],
	taskId: "",
	status: "0"
})
const rectStatus = computed(() => {
	if (rectInfo.value.status === "0") return "进行中"
	if (rectInfo.value.status === "1") return "审核中"
	if (rectInfo.value.status === "2") return "审合不通过"
	if (rectInfo.value.status === "3") return "审核通过"
})
const previewFile = (file:IFile) => {
	console.log(file.suffix)
	if (file.suffix === "jpg" || file.suffix === "png" || file.suffix === "jpeg") {
		uni.previewImage({
			urls: [file.url],
			current: file.url
		})
	} else if (file.suffix === "docx") {
		// #ifdef MP-ALIPAY
		const query = obj2str({
			filepath: file.url,
		})
		// console.log(env.MINI_APP_URL + "pages/index/word?" + query)
		dd.openLink({
			url: `${env.DD_SCHEME}${env.DD_HOST}/action/open_app?type=1&offline=false&url=${encodeURIComponent(env.MINI_APP_URL + "pages/index/word?" + query)}`
		}).then((res:any) => {
			console.log("success")
			console.log(res)
		}).catch((err:any) => {
			console.log("error")
			console.log(err)
		})
		// #endif
		// #ifdef H5
		if (store.getters.osName === "ios") {
			router.push("/pages/index/word?title=" + file.name + "&filepath=" + file.url)
		} else {
			location.href = file.url
		}
		// #endif
	} else {
		location.href = file.url
	}
}

const calFileView = (file: IFile) => {
	if (file.suffix === "jpg" || file.suffix === "png" || file.suffix === "jpeg") {
		return file.url
	} else if (file.suffix === "docx") {
		return env.H5_RELATIVE_URL + "/static/images/docx_icon.png"
	} else {
		return env.H5_RELATIVE_URL + "/static/images/otherfile_icon.png"
	}
}


const handleSubmit = () => {
	const rect_id = rectInfo.value.records[0].rectificationTaskId
	router.push(`/pages/mission/upload_rect?rect_id=${rect_id}`)
}

// ——————————————————————————

const navToMission = () => {
	router.push(`/pages/mission/mission?mission_id=${rectInfo.value.taskId}`)
}

const handleReview = () => {
	let rect_record_data: any
	console.log("reviewfiles", rectInfo.value)
	for (let v of rectInfo.value.records) {
		console.log("id compare", v.operationUserId, userInfo.id)
		if (v.operationUserId !== userInfo.id) {
			rect_record_data = v
			break
		}
	}
	console.log('resule', rect_record_data)
	store.commit("SET_TEMP_RECT", { data: rect_record_data })
	router.push("/pages/mission/rect_review")
}

const loadData = () => {
	if (record_id) {
		queryRectbyTaskRecordId({
			record_id: record_id
		}).then(res => {
			res.files.map(file => {
				if (file.fileName) {
					file.suffix = getSuffix(file.fileName)
					file.url = file.fileUrl
				}
			})
			res.records.map((record, i) => {
				record.files.map(file => {
					if (file.fileName) {
						file.suffix = getSuffix(file.fileName)
						file.url = file.fileUrl
					}
				})
				if (i == res.records.length - 1) {
					record.files = res.files
				}
			})
			
			console.log(res)
			rectInfo.value = res
		})
	} else {
		queryRectbyRectRecordId({
			record_id: rect_record_id
		}).then(res => {
			res.files.map(file => {
				if (file.fileName) {
					file.suffix = getSuffix(file.fileName)
					file.url = file.fileUrl
				}
			})
			res.records.map((record, i) => {
				record.files.map(file => {
					if (file.fileName) {
						file.suffix = getSuffix(file.fileName)
						file.url = file.fileUrl
					}
				})
				if (i == res.records.length - 1) {
					record.files = res.files
				}
			})
			rectInfo.value = res
		})
	}
}

onShow(() => {
	loadData()
})

onLoad((options) => {
	console.log(options)
	if (options.record_id) {
		record_id = options.record_id
		loadData()
	} else if (options.rect_record_id) {
		rect_record_id = options.rect_record_id
		loadData()
	} else {
		router.replace("/pages/index/error")
	}
})
</script>

<style lang="stylus" scoped>
body
	background-color #ffffff
.cu-time
	color: #ffffff
	font-size: 32rpx;
	font-weight: 400
	
.file-box
	margin-top: 10rpx
	border-radius: 6rpx
	background-color: #f1f1f1
	display: flex
	box-sizing: border-box
	padding: 20rpx 40rpx
	.file-icon
		width: 25%
		text-align: center
		image
			height 120rpx
			width 120rpx

.hint-box
	margin-top 10rpx
	background darkcyan
	border-radius: 6rpx
	box-sizing: border-box
	padding: 30rpx
	display: flex
	justify-content: space-between
	transition: background .3s
.hint-box:active
	background: #006e6e
.hint-box-role2
	margin-top 10rpx
	background darkcyan
	border-radius: 6rpx
	box-sizing: border-box
	padding: 30rpx
	display: flex
	justify-content: space-between
	transition: background .3s
	
.handle-bar
	position: fixed
	width: 100%
	bottom: 0
	// height: 120rpx
	padding: 40rpx 0
	background-color: #fff
	.hint-text
		text-align center
		color: #6d6d6d
		
.status-text
	text-align: center
.status-text_0
	color: #1c8509
.status-text_1
	color: #ffac12
.status-text_2
	color: #871d0f
.status-text_3
	color: #417eba
	
.link-row
	display: flex
	justify-content: flex-end
	align-items: center
	.link-btn
		margin-right: 22rpx;
		color: #fff;
		background: darkcyan;
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-radius: 6rpx
</style>